<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Operation, DataAnalysis, Setting, Tools } from '@element-plus/icons-vue'

const router = useRouter()

const navigateToMES = () => {
  router.push('/mes')
}

const features = [
  {
    icon: Operation,
    title: '生产管理',
    description: '完整的生产计划、工单管理和产线监控',
    color: '#409EFF'
  },
  {
    icon: DataAnalysis,
    title: '数据分析',
    description: '实时生产数据分析和智能报表',
    color: '#67C23A'
  },
  {
    icon: Tools,
    title: '设备管理',
    description: '设备状态监控和预防性维护',
    color: '#E6A23C'
  },
  {
    icon: Setting,
    title: '系统管理',
    description: '用户权限和系统配置管理',
    color: '#F56C6C'
  }
]
</script>

<template>
  <div class="home-container">
    <!-- 主标题区域 -->
    <div class="hero-section">
      <h1 class="main-title">MES制造执行系统</h1>
      <p class="subtitle">智能制造，数字化工厂管理解决方案</p>

      <el-button type="primary" size="large" class="enter-btn" @click="navigateToMES">
        <el-icon>
          <Operation />
        </el-icon>
        进入MES管理系统
      </el-button>
    </div>

    <!-- 功能特色 -->
    <div class="features-section">
      <h2 class="section-title">核心功能</h2>
      <div class="features-grid">
        <el-card v-for="feature in features" :key="feature.title" class="feature-card" shadow="hover">
          <div class="feature-content">
            <div class="feature-icon" :style="{ color: feature.color }">
              <el-icon :size="48">
                <component :is="feature.icon" />
              </el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 系统优势 -->
    <div class="advantages-section">
      <h2 class="section-title">系统优势</h2>
      <div class="advantages-grid">
        <div class="advantage-item">
          <h4>🚀 高效管理</h4>
          <p>实时监控生产过程，提高生产效率</p>
        </div>
        <div class="advantage-item">
          <h4>📊 数据驱动</h4>
          <p>基于数据分析的智能决策支持</p>
        </div>
        <div class="advantage-item">
          <h4>🔧 设备联网</h4>
          <p>设备状态实时监控和预警</p>
        </div>
        <div class="advantage-item">
          <h4>👥 协同作业</h4>
          <p>多部门协同，流程标准化</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 主标题区域 */
.hero-section {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.main-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.5rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.enter-btn {
  font-size: 1.2rem;
  padding: 15px 40px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

/* 功能特色 */
.features-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 50px;
  color: #2c3e50;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.feature-card {
  border-radius: 15px;
  transition: all 0.3s;
  border: none;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.feature-content {
  text-align: center;
  padding: 20px;
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.feature-content p {
  color: #7f8c8d;
  line-height: 1.6;
}

/* 系统优势 */
.advantages-section {
  padding: 80px 20px;
  background: white;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.advantage-item {
  text-align: center;
  padding: 30px 20px;
  border-radius: 10px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.advantage-item:hover {
  background: #e9ecef;
  transform: translateY(-5px);
}

.advantage-item h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.advantage-item p {
  color: #6c757d;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.5rem;
  }

  .subtitle {
    font-size: 1.2rem;
  }

  .hero-section {
    padding: 60px 20px;
  }

  .features-section,
  .advantages-section {
    padding: 60px 20px;
  }

  .section-title {
    font-size: 2rem;
  }
}
</style>
